import { FC, useState } from "react"
import { connect } from "react-redux"
import { useTranslation } from 'react-i18next'
import trading from '@/assets/images/index/trading.svg'
import trading_bgc from '@/assets/images/index/trading-bgc.svg'
import transaction from '@/assets/images/index/transaction.svg'
import transaction_bgc from '@/assets/images/index/transaction-bgc.svg'
import records from '@/assets/images/index/records.svg'
import records_bgc from '@/assets/images/index/records-bgc.svg'
import assets from '@/assets/images/index/assets.svg'
import assets_bgc from '@/assets/images/index/assets-bgc.svg'
import shui from '@/assets/images/index/shui.svg'
import shui_one from '@/assets/images/index/shui-one.svg'
import "./index.scss"
import { useNavigate } from "react-router-dom"

interface ITableNft {}

const TableNft: FC<ITableNft> = () => {

    const { t } = useTranslation()
    const navigate = useNavigate()

	const [ itemList ] = useState([
        {
            title: 'trading',
            icon: trading,
            url: trading_bgc,
            link: '/market'
        },
        {
            title: 'assets',
            icon: assets,
            url: assets_bgc,
            link: '/my-assets'
        },
        {
            title: 'sales',
            icon: records,
            url: records_bgc,
            link: '/my-sale'
        },
        {
            title: 'transaction',
            icon: transaction,
            url: transaction_bgc,
            link: '/'
        },
    ])

	const [ list ] = useState([
		{
			token: 'shui',
			bgc: '#fffdf9',
			img: shui,
			name: 'SHUI.GAME',
			price: '888 SUI',
		},
		{
			token: 'game',
			bgc: '#f9fcff',
			img: shui_one,
			name: 'SHUI.GAME',
			price: '888 SUI',
		},
	])

    const [ data ] = useState([
        {
            nft: '1st copy',
            proportion: '20%',
            holder: 'SHUIfoundation',
            distribution: 'reserve'
        },
        {
            nft: '2st copy',
            proportion: '15%',
            holder: 'SHUIDAO',
            distribution: 'reserve'
        },
        {
            nft: '3st copy',
            proportion: '10%',
            holder: 'founder',
            distribution: 'reserve'
        },
        {
            nft: '4st copy',
            proportion: '5%',
            holder: 'Co founders',
            distribution: 'reserve'
        },
        {
            nft: '500 copies',
            proportion: '50%',
            holder: 'user',
            distribution: 'each888SUI'
        },
    ])

    const [ game ] = useState([
        {
            gameFi: '1st copy',
            proportion: '25%',
            holder: 'SHUIfoundation',
            distribution: 'reserve'
        },
        {
            gameFi: '2st copy',
            proportion: '20%',
            holder: 'SHUIDAO',
            distribution: 'reserve'
        },
        {
            gameFi: '3st copy',
            proportion: '10%',
            holder: 'founder',
            distribution: 'reserve'
        },
        {
            gameFi: '4st copy',
            proportion: '5%',
            holder: 'Game Master Strategy',
            distribution: 'reserve'
        },
        {
            gameFi: '5st copy',
            proportion: '3%',
            holder: 'Co founders',
            distribution: 'reserve'
        },
        {
            gameFi: '6st copy',
            proportion: '2%',
            holder: 'Co founders',
            distribution: 'reserve'
        },
        {
            gameFi: '500 copies',
            proportion: '35%',
            holder: 'user',
            distribution: 'each888SUI'
        },
    ])
    

	return (
		<div id="table-item">
            <div className="top-table">
                {
                    itemList.map((item, index) => (
                        <div onClick={() => navigate(item.link)} className="cate-item" key={index}>
                            <div className="icon-box flex-center" style={{ backgroundImage: `url(${item.url})` }}>
                                <img src={item.icon} alt="" />
                            </div>
                            <div className="cate-desc">{t(`indexMarket.${item.title}`)}</div>
                        </div>
                    ))
                }
                {
                    list.map((item, index) => (
                        <div className="foot-item" key={index} style={{ background: item.bgc }}>
                            <div className="top-box">
                                <div className="token">{t(`indexMarket.${item.token}`)}</div>
                                <img src={item.img} alt="" />
                            </div>
                            <div className="nft-name">{item.name}</div>
                            <div className="nft-btn">{item.price}</div>
                        </div>
                    ))
                }
            </div>
            <div className="nft-table">
                <div className="top table">
                    <div className="row head">
                        <div className="cell">{t('market.nft')}</div>
                        <div className="cell">{t('indexMarket.proportion')}</div>
                        <div className="cell">{t('indexMarket.holder')}</div>
                        <div className="cell">{t('indexMarket.distribution')}</div>
                    </div>
                    {
                        data.map((item, index) => (
                            <div className="row td-content" key={index}>
                                <div className="cell">{item.nft}</div>
                                <div className="cell">{item.proportion}</div>
                                <div className="cell">{item.holder}</div>
                                <div className="cell">{item.distribution}</div>
                            </div>
                        ))
                    }
                </div>
                <div className="bottom table">
                    <div className="row head">
                        <div className="cell">{t('market.gameFi')}</div>
                        <div className="cell">{t('indexMarket.proportion')}</div>
                        <div className="cell">{t('indexMarket.holder')}</div>
                        <div className="cell">{t('indexMarket.distribution')}</div>
                    </div>
                    {
                        game.map((item, index) => (
                            <div className="row td-content" key={index}>
                                <div className="cell">{item.gameFi}</div>
                                <div className="cell">{item.proportion}</div>
                                <div className="cell">{item.holder}</div>
                                <div className="cell">{item.distribution}</div>
                            </div>
                        ))
                    }
                </div>
            </div>
		</div>
	)
}

const mapStoreToProps = () => {
	return {}
}

const mapDispatchToProps = () => {
	return {}
}

export default connect(mapStoreToProps, mapDispatchToProps)(TableNft)